<template>
    <div>
       <div class="weekend-title">周末去哪</div>
       <ul>
            <li class="item border-bottom" 
            v-for="item of weekendList" 
            :key="item.id"
            >
            <div>
                <img class="item-img" 
                    :src=item.imgUrl >
            </div>
                <div class="item-info">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-desc">{{ item.desc }}</p>
                </div>
            </li>
           </ul>
    </div>
</template>
<script>

export default {
   name: 'HomeWeekend',
   props:{
       weekendList:Array
   },
    data(){
        return{
           
        }
    }
}
</script>
<style lang="stylus" scoped>
@import '~styles/mixins.styl'
.weekend-title
    margin-top .2rem
    line-height .8rem
    background #eee
    text-indent .2rem
    font-size .28rem
item-img-wrapper
    overflow hidden
    height 0
    padding-button 37.09rem
.item-img
   width 100%
.item-info
    padding .14rem .2rem .2rem .2rem
.item-title
    overflow hidden
    margin-right 1.4rem
    line-height .54rem
    font-size .32rem
     ellipsis()
.item-desc
    overflow hidden
    margin-right 1.4rem
    font-size .23rem
    color #616161
    height .4rem
    ellipsis()
</style>
